<template>
  <div>
    <div id="lightStation">
      <i-button type="primary" style="margin-bottom:5px;" @click="showModel.modalStationAdd=true">新增场站</i-button>
      <tablePage ref="containerTab" :api="getStationInfoListByPage" :param="tabParam" :isStartLoad="true">
        <template slot-scope="props">
          <Table :columns="lightStationColumns" :data="props.data" @on-sort-change="props.sortChange" border></Table>
        </template>
      </tablePage>
      <tablePage ref="containerTab" :staticData="stationList" :isStartLoad="false" :mode="1">
        <template slot-scope="props">
          <Table :columns="lightStationColumns" border :data="props.data" @on-sort-change="props.sortChange"></Table>
        </template>
      </tablePage>
      <Modal
        v-model="showModel.modalStationEdit"
        title="编辑场站"
        @on-ok="stationEdit">
      </Modal>
      <Modal
        v-model="showModel.modalStationAdd"
        title="添加场站"
        @on-ok="stationAdd" width="960">
        <Form :model="addData" :label-width="120" ref="addData" :rules="addDataRule">
          <Row>
            <i-col span="8">
              <FormItem label="场站名称" prop="projectName">
                <Input v-model="addData.stationName" placeholder="场站名称"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="自营/合营" prop="publicCompany">
                <RadioGroup v-model="addData.basicInfoSelfSupport">
                  <Radio label="1">自营</Radio>
                  <Radio label="0">合营</Radio>
                </RadioGroup>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="货场数量" prop="publicCompany">
                <Input v-model="addData.basicInfoStationCount" placeholder="货场数量"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8">
              <FormItem label="货场面积" prop="projectName">
                <Input v-model="addData.basicInfoStationArea" placeholder="货场面积"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="进出门数量" prop="publicCompany">
                <Input v-model="addData.basicInfoInOutCount" placeholder="进出门数量"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="有无门禁" prop="publicCompany">
                <i-switch v-model="addData.basicInfoGuard" size="large">
                  <span slot="open">有</span>
                  <span slot="close">无</span>
                </i-switch>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8">
              <FormItem label="场站级别" prop="projectName">
                <Select v-model="addData.stationRank">
                  <Option v-for="item in stationRankRoul" :value="item.id" :key="item.id">{{ item.name }} ({{item.qj}})
                  </Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="专用线条数" prop="publicCompany">
                <Input v-model="addData.exclusiveLine" placeholder="专用线条数"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="大宗整车货物运输业务-年运量（万吨）" prop="transBizZcNyl">
                <Input v-model="addData.transBizZcNyl" placeholder="大宗整车货物运输业务-年运量（万吨）"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8">
              <FormItem label="大宗整车货物运输业务-占比" prop="projectName">
                <Input v-model="addData.transBizZcZb" placeholder="大宗整车货物运输业务-占比"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="集装箱运输业务量-年运量（万吨）" prop="publicCompany">
                <Input v-model="addData.transBizJzxNyl" placeholder="集装箱运输业务量-年运量（万吨）"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="集装箱运输业务量-占比" prop="transBizJzxZb">
                <Input v-model="addData.transBizJzxZb" placeholder="集装箱运输业务量-占比"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8">
              <FormItem label="主要品类" prop="projectName">
                <Select v-model="addData.transBizType" multiple style="width:260px">
                  <Option v-for="item in categoryList" :value="item.typeId" :key="item.typeId">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="集装箱运输业务量-年运量（万吨）" prop="publicCompany">
                <Input v-model="addData.transBizJzxNyl" placeholder="集装箱运输业务量-年运量（万吨）"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="发到站货物量占比-发站" prop="transBizJzxZb">
                <Input v-model="addData.keyPointZbFz" placeholder="发到站货物量占比-发站"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8">
              <FormItem label="发到站货物量占比-到站" prop="projectName">
                <Input v-model="addData.keyPointZbDz" placeholder="发到站货物量占比-到站"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="大宗煤炭运输业务的发到站名-发站" prop="publicCompany">
                <Input v-model="addData.keyPointDzmtFz" placeholder="大宗煤炭运输业务的发到站名-发站"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="大宗煤炭运输业务的发到站名-到站" prop="transBizJzxZb">
                <Input v-model="addData.keyPointDzmtDz" placeholder="大宗煤炭运输业务的发到站名-到站"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8">
              <FormItem label="是否办理货运业务" prop="projectName">
                <Input v-model="addData.keyPointFreightBiz" placeholder="是否办理货运业务"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="是否开展接取送达业务" prop="publicCompany">
                <Input v-model="addData.keyPointFreightJqsd" placeholder="是否开展接取送达业务"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="是否站内掏箱" prop="transBizJzxZb">
                <Input v-model="addData.keyPointZntx" placeholder="是否站内掏箱"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8">
              <FormItem label="是否有协议车队" prop="projectName">
                <Input v-model="addData.keyPointProtocolFleet" placeholder="是否有协议车队"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="协议车队数量" prop="publicCompany">
                <Input v-model="addData.keyPointProtocolFleetCount" placeholder="协议车队数量"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="自有车辆数量" prop="keyPointOwnFleetCount">
                <Input v-model="addData.keyPointOwnFleetCount" placeholder="自有车辆数量"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8">
              <FormItem label="是否有空箱回流需求" prop="projectName">
                <Input v-model="addData.keyPointKxhl" placeholder="是否有空箱回流需求"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="是否有站内箱源管理需求" prop="publicCompany">
                <Input v-model="addData.keyPointZnxygl" placeholder="是否有站内箱源管理需求"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="到站业务流程" prop="keyPointOwnFleetCount">
                <Input v-model="addData.workflowDzyw" placeholder="到站业务流程"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8">
              <FormItem label="发站业务流程" prop="projectName">
                <Input v-model="addData.stationPersonName" placeholder="发站业务流程"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="场站对接人姓名" prop="publicCompany">
                <Input v-model="addData.stationPersonTel" placeholder="场站对接人姓名"></Input>
              </FormItem>
            </i-col>
            <i-col span="8">
              <FormItem label="场站对接人职位" prop="场站对接人职位">
                <Input v-model="addData.stationPersonDuty" placeholder="场站对接人职位"></Input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="8">
              <FormItem label="初步摸底结论" prop="projectName">
                <Input v-model="addData.evaluate" placeholder="初步摸底结论"></Input>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </Modal>
    </div>
  </div>
</template>
<script>
  import {getStationInfoList, getCategoryList, getStationInfoListByPage} from '@api/lightStation/station'
  import tablePage from '@components/table/tablePage.vue'

  export default {
    name: 'lightStationList',
    data () {
      let tabParam = {}
      let stationList = []
      let categoryList = {}
      let showModel = {
        modalStationEdit: false,
        modalStationAdd: false
      }
      let lightStationColumns = [
        {
          title: '场站名称',
          key: 'stationName',
          width: 100,
          fixed: 'left'
        },
        {
          title: '自营/合营',
          width: 100,
          key: 'basicInfoSelfSupport'
        },
        {
          title: '货场数量',
          width: 100,
          key: 'basicInfoStationCount'
        },
        {
          title: '货场面积',
          width: 100,
          key: 'basic_info_station_area'
        },
        {
          title: '进出门数量',
          width: 100,
          key: 'basicInfoInOutCount'
        },
        {
          title: '有无门禁',
          width: 100,
          key: 'basicInfoGuard'
        },
        {
          title: '场站级别',
          width: 100,
          key: 'stationRank'
        },
        {
          title: '专用线条数',
          width: 100,
          key: 'exclusiveLine'
        },
        {
          title: '大宗整车货物运输业务-年运量（万吨）',
          width: 100,
          key: 'transBizZcNyl'
        },
        {
          title: '大宗整车货物运输业务-占比',
          width: 100,
          key: 'transBizZcZb'
        },
        {
          title: '集装箱运输业务量-年运量（万吨）',
          width: 100,
          key: 'transBizJzxNyl'
        },
        {
          title: '集装箱运输业务量-占比',
          width: 100,
          key: 'transBizJzxZb'
        },
        {
          title: '主要品类（集装箱、煤、石油、矿石、钢铁、化肥及农药等）',
          width: 100,
          key: 'transBizType'
        },
        {
          title: '发到站货物量占比-发站',
          width: 100,
          key: 'keyPointZbFz'
        },
        {
          title: '发到站货物量占比-到站',
          width: 100,
          key: 'keyPointZbDz'
        },
        {
          title: '大宗煤炭运输业务的发到站名-发站',
          width: 100,
          key: 'keyPointDzmtFz'
        },
        {
          title: '大宗煤炭运输业务的发到站名-到站',
          width: 100,
          key: 'keyPointDzmtDz'
        },
        {
          title: '是否办理货运业务',
          width: 100,
          key: 'keyPointFreightBiz'
        },
        {
          title: '是否开展接取送达业务',
          width: 100,
          key: 'keyPointFreightJqsd'
        },
        {
          title: '是否站内掏箱',
          width: 100,
          key: 'keyPointZntx'
        },
        {
          title: '是否有协议车队',
          width: 100,
          key: 'keyPointProtocolFleet'
        },
        {
          title: '协议车队数量',
          width: 100,
          key: 'keyPointProtocolFleetCount'
        },
        {
          title: '自有车辆数量',
          width: 100,
          key: 'keyPointOwnFleetCount'
        },
        {
          title: '是否有空箱回流需求',
          width: 100,
          key: 'keyPointKxhl'
        },
        {
          title: '是否有站内箱源管理需求',
          width: 100,
          key: 'keyPointZnxygl'
        },
        {
          title: '到站业务流程',
          width: 100,
          key: 'workflowDzyw'
        },
        {
          title: '发站业务流程',
          width: 100,
          key: 'workflowFzyw'
        },
        {
          title: '场站对接人姓名',
          width: 100,
          key: 'stationPersonName'
        },
        {
          title: '场站对接人联系方式',
          width: 100,
          key: 'stationPersonTel'
        },
        {
          title: '场站对接人职位',
          width: 100,
          key: 'stationPersonDuty'
        },
        {
          title: '初步摸底结论',
          width: 100,
          key: 'evaluate'
        },
        {
          title: '操作',
          width: 100,
          key: 'action',
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: (value, row) => {
                    this.showStationEdit(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      content: '确定删除？',
                      onOk: () => {
                        let id = params.row.id
                        this.stationDelete(id)
                      }
                    })
                  }
                }
              }, '删除')
            ])
          }
        }
      ]
      let tableDataDetail = {
        TYPE: '',
        id: '',
        truckNo: '',
        type_name: '',
        fleetId: ''
      }
      let stationRankRoul = [
        {name: '一级', qj: '100万吨以上', id: '1'},
        {name: '二级', qj: '51万吨～100万吨', id: '2'},
        {name: '三级', qj: '31万吨～50万吨', id: '3'},
        {name: '四级', qj: '11万吨～30万吨', id: '4'},
        {name: '五级', qj: '0～10万吨', id: '5'}
      ]
      let addData = {
        'basicInfoGuard': true,
        'basicInfoInOutCount': '',
        'basicInfoSelfSupport': '1',
        'basicInfoStationCount': 0,
        'basicInfostationArea': 0,
        'dataStation': {},
        'evaluate': '',
        'exclusiveLine': 0,
        'keyPointDzmtDz': '',
        'keyPointDzmtFz': '',
        'keyPointFreightBiz': '',
        'keyPointFreightJqsd': '',
        'keyPointKxhl': '',
        'keyPointOwnFleetCount': '',
        'keyPointProtocolFleet': '',
        'keyPointProtocolFleetCount': '',
        'keyPointZbDz': '',
        'keyPointZbFz': '',
        'keyPointZntx': '',
        'keyPointZnxygl': '',
        'stationInfoCategories': [],
        'stationName': '',
        'stationPersonDuty': '',
        'stationPersonName': '',
        'stationPersonTel': '',
        'stationRank': '3',
        'transBizJzxNyl': '',
        'transBizJzxZb': '',
        'transBizType': [1, 2],
        'transBizZcNyl': '',
        'transBizZcZb': '',
        'workflowDzyw': '',
        'workflowFzyw': ''
      }
      let editData = {}
      let addDataRule = {}
      let datas = {
        categoryList,
        stationRankRoul,
        stationList,
        showModel,
        lightStationColumns,
        tableDataDetail,
        addData,
        addDataRule,
        editData,
        getStationInfoListByPage,
        tabParam
      }
      return datas
    },
    computed: {},
    methods: {
      showStationEdit (row) {},
      stationEdit () {},
      stationAdd () {},
      stationDelete (id) {},
      getStationList () {
        getStationInfoList().then(res => {
          if (res.data.isSuccess === 1) {
            this.stationList = res.data.data
          }
        })
        getCategoryList().then(res => {
          if (res.data.isSuccess === 1) {
            this.categoryList = res.data.data
          }
        })
      }
    },
    mounted () {
      this.getStationList()
    },
    components: {tablePage}
  }
</script>
<style scoped>

</style>
